<script>
    import {mapState, mapMutations, mapGetters} from 'vuex';

    export default {
        computed: {
            ...mapState([
                'currentSessionId',
            ]),
            ...mapGetters([
                'filteredSessions'
            ])
        },
        methods: mapMutations([
            'selectSession'
        ])
    };
</script>

<template>
    <div class="list">
        <ul>
            <li v-for="item in filteredSessions" :class="{ active: item.id === currentSessionId }" @click="selectSession(item.id)">
                <img class="userAvatar" width="30" height="30" :alt="item.user.name" :src="item.user.img">
                <p class="userName">{{item.user.name}}</p>
            </li>
        </ul>
    </div>
</template>

<style scoped lang="less">
    img {
      display: inline-block;
    }
    .list {
        li {
            padding: 12px 15px;
            border-bottom: 1px solid #292C33;
            cursor: pointer;
            transition: background-color .1s;

            &:hover {
                background-color: rgba(255, 255, 255, 0.03);
            }
            &.active {
                background-color: rgba(255, 255, 255, 0.1);
            }
        }
        .userAvatar, .userName {
            vertical-align: middle;
        }
        .userAvatar {
            border-radius: 2px;
        }
        .userName {
            display: inline-block;
            margin: 0 0 0 15px;
        }
    }
</style>
